<template>
  <div class="officialwebsite">
    <swiper class="swiper-wrap" :options="swiperOption">
      <swiper-slide class="slide" v-for="(item, index) in slideimgs" :key="index"><img :src="imgsrc(item)" key="index" />
      </swiper-slide>
    </swiper>
    <div class="header">
      <img src="./assets/phone-logo.png" class="logoImg">
      <ul class="nav">
        <li class="nav-text">
          <router-link to="/" class="hover">首页</router-link>
        </li>
        <li class="nav-text">
          <router-link to="/about-us">关于我们</router-link>
        </li>
        <li class="nav-text">
          <router-link to="/contact-us">联系我们</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <img :src="handleImg('text')" class="textimg">
      <img :src="handleImg('detail')" class="text-detail">
      <div class="onload">
        <div class="btn" @click="handleLoad">下载拾恋APP</div>
        <div class="code-wrap">
          <div class="code" v-show="showCode">
            <img src="./assets/code.jpg">
            <p>扫码下载拾恋APP</p>
          </div>
        </div>
      </div>
      <p class="copy">武汉悠然一指网络有限公司 鄂ICP备16008395号-6 鄂网文【2016】1503-044号
        <a href="http://wljg.scjgj.wuhan.gov.cn:80/whwjww/indexquery/indexqueryAction!dizview.dhtml?chr_id=75b3c6ffef99ebc542b9cca30a035579&bus_ent_id=442010000003870655&bus_ent_chr_id=0038193b69674e5ba1d1d3089bae13d1"
          target="_blank">
          <img src="./assets/govIcon.png" class="identImg" title="武汉网监电子标识" alt="武汉网监电子标识" border="0" />
        </a>
      </p>
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502003648" target="_blank"
        class="beianText">
        鄂公网安备42018502003648号 <img src="./assets/int_surveillance.png" class="identImg"/>
      </a>
    </div>
  </div>
</template>
<script>
  import 'swiper/dist/css/swiper.css'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'
  let u = navigator.userAgent;
  let slideimgs = [{
    pc: require('./assets/bg1.jpg'),
    phone: require('./assets/phone-01.jpg')
  }, {
    pc: require('./assets/bg2.jpg'),
    phone: require('./assets/phone-02.jpg')
  }, {
    pc: require('./assets/bg3.jpg'),
    phone: require('./assets/phone-03.jpg')
  }];
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          loop: true,
          autoplay: {
            delay: 4000,
            disableOnInteraction: false
          },
        },
        slideimgs: slideimgs
      }
    },
    computed: {
      showCode() {
        return window.screen.width > 830
      }
    },
    methods: {
      imgsrc(item) {
        if (window.screen.width > 830) {
          return item.pc;
        } else {
          return item.phone;
        }
      },
      handleImg(arg) {
        if (window.screen.width > 830) {
          if (arg === 'text') {
            return require('./assets/text.png');
          } else if (arg === 'detail') {
            return require('./assets/text-detail.png')
          }

        } else {
          if (arg === 'text') {
            return require('./assets/text-phone.png');
          } else if (arg === 'detail') {
            return require('./assets/text-detail-phone.png')
          }
        }
      },
      handleLoad() {
        if (u.indexOf('iPhone') > -1) {
          window.location.href = 'itms-apps://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1438503085'
        } else {
          window.location.href = 'https://sj.qq.com/myapp/detail.htm?apkName=com.yryz.lovelorn'
        }
      }
    }
  }

</script>
<style scoped type="text/css">
  .officialwebsite {
    width: 100%;
    height: 100vh;

    & .header {
      position: absolute;
      z-index: 99;
      width: 11.20rem;
      height: 0.56rem;
      top: 0.38rem;
      left: 50%;
      margin-left: -5.5rem;
      display: flex;
      justify-content: space-between;

      & .logoImg {
        width: 1.32rem;
        height: 0.56rem;
      }

      & .nav {
        display: flex;
        align-items: center;
      }

      & .nav-text {
        font-size: 0.2rem;
        margin-left: 0.66rem;
        line-height: 1;

        & a {
          color: #fff;

          &.hover {
            font-size: 0.24rem;
            border-bottom: 2px solid #ffecb3;
            padding: 2px 0;
          }
        }
      }
    }

    & .content {
      position: absolute;
      z-index: 99;
      width: 11.30rem;
      height: 5rem;
      top: 2rem;
      left: 50%;
      margin-left: -5.65rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      & .textimg {
        width: 11.30rem;
        height: 1.11rem;
      }

      & .text {
        font-size: 0.24rem;
        color: #fff;
        margin-top: 0.5rem;
        text-align: center;
      }

      & .text-detail {
        margin-top: 0.5rem;
        width: 5.04rem;
        height: 0.22rem;

      }

      & .onload {
        cursor: pointer;
        width: 3.4rem;
        height: 2rem;
        margin-top: 0.4rem;

        &:hover .btn {
          display: none;
        }

        & .btn {
          width: 3.4rem;
          opacity: 1;
          width: 3.4rem;
          height: 0.69rem;
          /* padding: 0.65rem 0; */
          margin-top: 0.65rem;
          background: linear-gradient(to right, #f9d378, #e4408c);
          border-radius: 1rem;
          line-height: 0.69rem;
          text-align: center;
          font-size: 0.3rem;
          color: #fff;
          transition: opacity 0.5s;

          &:hover {
            opacity: 0;
          }

          &:hover+.code {
            opacity: 1;
          }
        }

        & .code-wrap {
          padding: 0 0.8rem;
          position: absolute;
          top: 2.23rem;
          opacity: 0;
          transition: opacity 0.5s;

          &:hover {
            opacity: 1;
          }
        }

        & .code {
          background: #fff;
          width: 1.8rem;
          height: 2rem;
          padding: 0.14rem 0.14rem 0;
          border-radius: 0.06rem;

          & img {
            width: 1.56rem;
            height: 1.56rem;
          }

          & p {
            margin-top: 0.08rem;
            font-size: 0.14rem;
            color: #06259e;
            text-align: center;
            line-height: 1;
          }
        }
      }
    }

    & .copy {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.14rem;
			color: rgba(255, 255, 255, 0.5);
			line-height: 1;
			margin-top: 0.2rem;
    }

    & .identImg {
      margin-left: 0.1rem;
      width: 0.18rem;
      height: 0.18rem;
		}
		& .beianText {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 0.14rem;
			color: rgba(255,255,255,0.5);
			margin-top: 0.1rem;
			line-height: 1;
		}
  }

  .swiper-wrap {
    & .slide {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
    }
  }

  @media (width <=830px) {
    .officialwebsite {
      & .header {
        width: 90%;
        margin-left: -45%;
        height: 0.84rem;

        & .logoImg {
          width: 1.85rem;
          height: 0.82rem;
        }

        & .nav-text {
          font-size: 0.23rem;
          margin-left: 0.58rem;
        }

        & .nav-text .hover {
          font-size: 0.3rem;
        }
      }

      & .content {
        width: 100%;
        height: 10rem;
        margin-left: -50%;
        top: 1.3rem;

        & .textimg {
          width: 2.38rem;
          height: 4.9rem;
        }

        & .text-detail {
          width: 3.9rem;
          height: 0.76rem;
        }

        & .onload {
          width: 4.1rem;
          height: 1.08rem;
          margin-top: 0.64rem;

          &:hover .btn {
            display: block;
          }

          & .btn {
            width: 4.10rem;
            height: 1.08rem;
            padding: 0;
            font-size: 0.42rem;
            line-height: 1.08rem;
            transition: none;
            margin-top: 0;

            &:hover {
              opacity: 1;
            }
          }
        }

        & .copy {
          /* margin-top: 0.2rem; */
          font-size: 0.18rem;
          color: rgba(255, 255, 255, 0.5)
        }
      }
    }
  }

</style>
